<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入字体css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>Rotating Navigation 旋转导航栏</title>
</head>

<body>
    <!-- 需要旋转的页面 -->
    <div class="container">
        <!-- 半圆导航按钮 -->
        <div class="circle-container">
            <div class="circle">
                <button id="close">
                    <i class="fas fa-times"></i>
                </button>
                <button id="open">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>

        <!-- 正文 -->
        <div class="content">
            <h1>江城子·乙卯正月二十日夜记梦</h1>
            <!-- 小型文本:一般用于[免责声明]/[注意事项]等 -->
            <small>苏轼 〔宋代〕</small>
            <p>十年生死两茫茫，不思量，自难忘。</p>
            <p>千里孤坟，无处话凄凉。</p>
            <p>纵使相逢应不识，尘满面，鬓如霜。</p>
            <p>夜来幽梦忽还乡，小轩窗，正梳妆。</p>
            <p>相顾无言，惟有泪千行。 </p>
            <p>料得年年肠断处，明月夜，短松冈</p>
            <h3>译文及注释</h3>
            <!-- alt:替换文字,当图像不能显示时 -->
            <img src="https://tse1-mm.cn.bing.net/th/id/R-C.9ce025550d75c7f6a837a3c0fbac4981?rik=VUmjZpd7wv9tfQ&riu=http%3a%2f%2fp0.itc.cn%2fimages01%2f20201021%2f84266e6845024bcb8adf8a99a3ac423a.jpeg&ehk=d8qfaDNa%2fq7NQgitKmpFo0VaGqIy%2f3XWY7SC%2f7mpByI%3d&risl=&pid=ImgRaw&r=0"
                alt="doggy">
            <p>你我夫妻诀别已经整整十年，强忍不去思念可终究难忘怀。 </p>
            <p>孤坟远在千里之外，没有地方能诉说心中的悲伤凄凉。 </p>
            <p>即使你我夫妻相逢怕是也认不出我来了，我四处奔波早已是灰尘满面两鬓如霜。 </p>
            <p>昨夜在梦中又回到了家乡，看见你正在小窗前对镜梳妆。 </p>
            <p>你我二人默默相对无言，只有泪落千行。 </p>
            <p>料想你年年都为我柔肠寸断，在那凄冷的月明之夜，在那荒寂的短松冈上。 </p>
            <p>这首词运用分合顿挫，虚实结合以及叙述白描等多种艺术的表现方法，来表达作者怀念亡妻的思想感情，在对亡妻的哀思中又糅进自己的身世感慨，因而将夫妻之间的情感表达得深婉而挚着，使人读后无不为之动情而感叹哀惋。▲ </p>
        </div>
    </div>

    
    <!-- 导航链接 -->
    <nav>
        <ul>
            <li><i class="fas fa-home"></i><a href="#">主页</a></li>
            <li><i class="fas fa-user-alt"></i><a href="#">关于我们</a></li>
            <li><i class="fas fa-envelope"></i><a href="#">联系方式</a></li>
        </ul>
    </nav>

    <script src="script.js"></script>
</body>

</html>